<template>
	<div class="flex items-center">
		<betting-combo :data="sportIds" inline />
		<betting-odds-combo class="ml-1" :data="oddsList" />
	</div>
</template>

<script lang="ts" setup>
import { BettingCombo, BettingOddsCombo } from '@/components/betting'
import { BetslipComboType, Selection } from '@/types'
import { PropType, computed } from 'vue'
import { useMatchStore } from '@/store'

const props = defineProps({
	data: {
		type: Object as PropType<BetslipComboType>,
		required: true
	},
	selections: {
		type: Array<Selection>,
		default: () => []
	}
})

const matchStore = useMatchStore()

const sportIds = computed(() =>
	props.data.list?.map((item) => matchStore.getMatch(item.eventId)?.sportId)
)

const oddsList = computed(() => props.selections.map(({ trueOdds }) => +trueOdds))
</script>
